<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>{{nickName}}</span>
            </div>
        </template>
        <el-descriptions :column="2" border direction="horizontal">
            <el-descriptions-item label="身份：">咨询师</el-descriptions-item>
            <el-descriptions-item label="手机号：">{{phone}}</el-descriptions-item>
            <el-descriptions-item label="邮箱：">{{email}}</el-descriptions-item>
            <el-descriptions-item label="申请咨询">
                <el-button type="primary" icon="el-icon-mobile-phone" circle @click="open"></el-button>
            </el-descriptions-item>
            <el-descriptions-item label="简介：">{{summary}}</el-descriptions-item>
        </el-descriptions>
    </el-card>
</template>

<script>
import {getCurrentInstance} from "vue";
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
import {addTask} from "@/api/ConTask";
import {getUser} from "@/utils/cookies";

export default {
  name: "idCard",
  props: ['nickName', 'summary', 'email', 'phone', 'conId'],
  methods: {
    open(){
      ElMessageBox.prompt('请输入您的手机号', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
        inputErrorMessage: '手机号格式不正确',
        inputValue: getUser()? getUser().phone: '',
        callback: (action, instance) => {
          if (action.action === 'confirm'){
            const data = {
              conId: this.conId,
              nickName: getUser().nickName,
              userPhone: action.value,
              status: 1
            }
            addTask(data).then(res => {
              ElMessage({
                showClose: true,
                message: '已申请，稍后会有咨询师联系您',
                type: 'success'
              });
            })
          }else {
            ElMessage('取消输入')
          }
        }
      })
    }
  },

}
</script>

<style scoped>

</style>
